<template> 
	<view class="page">
			<view class="courseware-list-box">
				<view v-for="(item,index) in pageList" :key="index">
					<view class="time f_24 f_normal">{{item.createtime}}</view>
					<view class="info">
						<!-- 学生： -->
						<view class="msg f_24 navy_blue" v-if="userIdentity==0">
							<block v-if="item.type==1">亲的订单尚未支付，超时将自动取消订单喔~</block>
							<block v-else-if="item.type==2">
								亲的订单已成功支付，请进入详情查看上课时间
							</block>
							<block v-else-if="item.type==3">
								亲的退款申请已通过，进入详情页查看吧
							</block>
							<block v-else-if="item.type==4">
								亲的退款申请已被拒绝，进入详情页查看吧
							</block>
							<block v-else-if="item.type==5">
								亲的评价已收到教师回复，进入详情页查看吧
							</block>
							<block v-else-if="item.type==8">
								亲的评价已收到教师回复，进入详情页查看吧
							</block>
						</view>
						<!-- 教师:2=付款成功6=退款申请,7=订单取消,8=评价 -->
						<view class="msg f_24 navy_blue"v-if="userIdentity==1">
							<block v-if="item.type==2">您有一个新订单，请进入详情页查看</block>
							<block v-else-if="item.type==6">
								发起订单退款申请，请进入详情页查看
							</block>
							<block v-else-if="item.type==7">
								订单超时未付款，已自动取消
							</block>
							<block v-else-if="item.type==8">
								收到一条新评价，快到我的评价中查看吧
							</block>
						</view>
						<view class="dis-flex flex-y-center info-b-b">
							<view class="teacher-image120 p-r">
								<image v-if="userIdentity==0" :src="item.course_order.teacher!=null?item.course_order.teacher.headeravatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill" lazy-load></image>
								<image v-if="userIdentity==1" :src="item.user!=null?item.user.avatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill" lazy-load></image>
								<text v-if="userIdentity==0?item.reading==0:item.teacher_reading==0" class="reading dis-block p-a"></text>
							</view>
							<view class="navy_blue f_normal dis-flex flex-x-center flex-dir-column">
								<view class="f_32 teacher-name" v-if="userIdentity==0">{{item.course_order.language_grade}}{{item.course_order.language}}{{item.course_order.username}}</view>
								<view class="f_32 teacher-name"v-if="userIdentity==1">{{item.course_order.teacher_course.language.title}}<text>{{item.course_order.classdata==1?'教师上门':'学生上门'}}</text> </view>
								<view class="f_24 gery1" v-if="userIdentity==0">共计<text class="navy_blue">{{item.course_order.num}}</text>课次，<text class="navy_blue">{{item.course_order.total_hour}}</text>课时</view>
								<view class="f_28 gery1" v-if="userIdentity==1&&item.user!=null">
									<text class="username">{{item.user.nickname}}</text>
									<text>{{item.user.mobile}}</text>
								</view>
							</view>
						</view>
						<view class="btn-box f_24 f_normal flex-x-end dis-flex" v-if="userIdentity==0">
							<view class="btn" @tap="bindToDetail(item.remind_order_id,item.course_order_id,item.reading,index)"><block v-if="item.type==1">去支付</block><block v-else>去查看</block></view>
						</view>
						<view class="btn-box f_24 f_normal flex-x-end dis-flex" v-if="userIdentity==1" @tap="skipOrderDetail(item.remind_order_id,item.course_order_id,item.teacher_reading,index)">
							<view class="btn">查看详情</view>
						</view>
					</view>
				</view>
				<load-more :status="loadingStatus" defaultIcon="1" text="暂无信息"></load-more>
			</view>
	</view>
</template>

<script>
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js';
import API from '@/static/api/index.js';
import loadMore from '@/components/loadmore/index.vue';
export default{
	name:'course-to-remind',
	mixins: [commonMixinFun],
	components: {
		loadMore
	},
	data(){
		return{
			page:1,
			size:10,
			tools:0,
			isRequest:false,
			pageList:[],
			loadingStatus: 'loading',
			coursewareList:[
				// {
				// 	type:1,
				// 	time:'2020-06-02 11:20',
				// 	teacherImage:'/static/image/temporary/index_banner_1.png',
				// 	teacherName:'初中高英语陈老师',
				// 	coursewareImage:'/static/image/temporary/language_4.png',
				// 	coursewareName:'初中高英语陈老师课件'
				// },
				// {
				// 	type:2,
				// 	time:'2020-06-02 11:20',
				// 	teacherImage:'/static/image/temporary/index_banner_1.png',
				// 	teacherName:'初中高英语陈老师',
				// 	hour:32,//课时
				// 	count:6//课次
				// }
			]
		}
	},
	onShow(){
		this.getOrderMessgaeList();
	},
	methods:{
		//订单提醒已读
		skipOrderDetail(remind_order_id,course_order_id,teacher_reading,index){
			if(teacher_reading==0){
				API.getTeacherRrderReading(remind_order_id).then(res=>{
					if(res.code==1){
						this.pageList[index].teacher_reading=1
					}
				})
			}
			this.pageTo('/pages/teacher/order_detail/index', { orderId: course_order_id })
		},
		getOrderMessgaeList(){
			let {page,size,isRequest,pageList,tools}=this;
			if(!isRequest&&(tools==0||tools>pageList.length)){
				this.isRequest=true
				let send = this.userIdentity==0? API.getOrderMessgaeList({page:page,size:size}):API.getTeacherRemindOrder({page:page,size:size})
				send.then(res=>{
					app._log(res)
					if(res.code==1){
						let tempArr = (page==1?[]:pageList).concat(res.data.course_order);
						this.pageList = tempArr
						this.page+=1
						this.loadingStatus = tempArr.length >= res.data.total ? 'nomore' : 'getmore';
					}else{
						if(res.code==405&&page==1){
						this.loadingStatus = 'empty';
						}else{
						this.loadingStatus = res.code == 405 ? (page == 1 ? 'empty' : 'nomore') : 'error';
							this.showToast(res.msg||'请稍后重试')
							if (num == 1) {
								this.pageList = [];
							}
						}
					}
					this.tools = res.data.total;
				}).finally(()=>{
					this.isRequest=false
				})
			}
		},
		bindToDetail(remind_order_id,course_order_id,reading,index){
			if(reading==0){
				API.getOrderReading(remind_order_id).then(res=>{
					app._log(res)
					this.pageList[index].reading=1
				})
			}
			this.pageTo('/pages/order_detail/index',{orderId:course_order_id})
		}
	},
	onReachBottom(){
		this.getOrderMessgaeList();
	}
}
</script>

<style scoped lang="scss">
.courseware-list-box{
	.time{
		color: #999999;
		padding: 24rpx 0;
		text-align: center;
	}
	.info{
		background-color: white;
		margin: 0 48rpx 24rpx 48rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx 
			rgba(37, 39, 72, 0.03);
		border-radius: 24rpx;
		.msg{
			padding: 24rpx 0;
			margin: 0 24rpx;
			border-bottom: 1px solid rgba(204, 204, 204, 0.5);
		}
		.teacher-image{
			font-size: 0;
			image{
				width: 64rpx;
				height: 64rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
			}
		} 
		.teacher-image120{
			font-size: 0;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
			}
		}
		.teacher-name{
			margin-bottom: 18rpx;
			text{
				margin-left: 15rpx;
			}
		}
		.courseware-image{
			font-size: 0;
			image{
				width: 96rpx;
				height: 96rpx;
				border-radius: 4rpx;
				margin-right: 16rpx;
			}
		}
		.courseware-name{
			color: #1f2633;
		}
		.info-b-b{
			margin: 0 24rpx;
			padding: 24rpx 0;
			border-bottom: 1px solid rgba(204, 204, 204, 0.5);
			.username{margin-right: 15rpx;}
		}
		.btn-box{
			padding: 16rpx 24rpx;
			.btn{
				display: inline-block;
				background-image: linear-gradient(314deg, 
					#7f4aff 0%, 
					#9254ff 100%);
				border-radius: 16rpx;
				color: #ffffff;
				padding: 16rpx 44rpx;
			}
		}
	}
}
</style>
